<template>
  <div class="top_nav">
    <div class="title" style="cursor:pointer;" @click="$router.push({path:'/lvshe/index'});">
      <img class="img" src="@/assets/nav/logo.png" />
      <span class="title_text">华西绿舍云平台</span>
    </div>
    <el-menu :default-active="activeIndex" style="background:rgba(0,0,0,0)" active-text-color="rgba(255,255,255,0.6)" text-color="rgba(255,255,255,0.6)" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <template v-for="(item, index) in Topmenu">
        <el-menu-item v-if="!item.children" :key="index" :index="item.name">
          <div :class="activeIndex == item.name ? 'actvie' : 'none'">
            <div>{{ item.title }}</div>
            <div class="border"></div>
          </div>
        </el-menu-item>
        <el-submenu v-if="item.children" :key="index" :index="item.name">
          <template slot="title">{{ item.title }}</template>
          <el-menu-item v-for="(item, index) in item.children" :key="index" :index="item.name">{{ item.title }}</el-menu-item>
        </el-submenu>
      </template>
    </el-menu>
    <div class="right_top-menu">
      <!--主题-->
      <div>
        <el-dropdown trigger="hover" @command="chooseTheme">
          <div>
            <IconA :index="theme"></IconA>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="1">
              <div class="theme">
                <i class="icon iconfont icontab_icon_skin"></i>
                <span>主题</span>
              </div>
            </el-dropdown-item>
            <el-dropdown-item command="2">
              <div class="theme">
                <i class="icon iconfont icontab_icon_skin"></i>
                <span>主题 （默认）</span>
              </div>
            </el-dropdown-item>
            <el-dropdown-item command="3">
              <div class="theme">
                <i class="icon iconfont icontab_icon_skin"></i>
                <span>主题</span>
              </div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <!--颜色-->
      <div>
        <el-dropdown trigger="hover" @command="chooseBg">
          <div>
            <IconB :index="theme"></IconB>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item, index) in colorList" :key="index" :command="item.color">
              <div :style="colorStyle(item.color)"></div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <!--下载-->

      <div @click="handleSelect('download')">
        <IconF :index="theme"></IconF>
      </div>
      <!--字体-->
      <div>
        <el-dropdown trigger="hover" @command="chosseFT">
          <IconC :index="theme"></IconC>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item, index) in sizeList" :key="index" :command="item.size">
              <div class="theme">
                <span class="size_text" :style="'font-size:' + item.size">{{ item.text }}</span>
              </div>
            </el-dropdown-item>
            <el-dropdown-item command="size" divided><span class="size_text" style="font-size:16px">自定义大小</span></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <!--通知-->
      <div>
        <el-dropdown trigger="hover" @command="handleDetails">
          <el-badge :value="noticeNumber" :hidden='noticeNumber===0'>
            <IconD :index="theme"></IconD>
          </el-badge>
          <el-dropdown-menu slot="dropdown" :disabled="!noticeList.length">
            <el-dropdown-item command="size" disabled>
              消息通知
            </el-dropdown-item>
            <el-dropdown-item command="size">
              <el-button class="bottom_all_two" size="mini" >全部清除</el-button>
            </el-dropdown-item>
            <div class="scroll" style="max-height:310px;overflow: auto;">
              <el-dropdown-item v-for="(item, index) in noticeList" :key="index" :command="item" @click="handleDetails(item)">
                <div class="notice" :title="item.title">
                  {{ item.title }}
                </div>
              </el-dropdown-item>
            </div>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <!--头像-->
      <div>
        <el-dropdown trigger="hover" @command="userCom">
          <div class="user_avatar">
            <el-avatar size="small" :src="headerImage"></el-avatar>
            <span class="user_name">{{userInfo.userRealName}}</span>
            <IconE :index="theme"></IconE>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="info">
              <div class="loginUser">
                <el-avatar size="large" :src="headerImage"></el-avatar>
                <div>
                  <div>
                    <span class="loginUserText">{{userInfo.userRealName}}</span>
                    <span>{{userInfo.stationName}}</span>
                  </div>
                  <div>{{userInfo.phoneNum}}</div>
                </div>
              </div>
              <div style="max-width:280px;">{{userInfo.organizationShowInfo.substr(1)}}</div>
            </el-dropdown-item>
            <el-dropdown-item command="station">
              岗位：{{station}}
            </el-dropdown-item>
            <el-dropdown-item command="userInfo">
              <div class="userCom">
                <i class="icon iconfont iconzu1896"></i>
                个人信息
              </div>
            </el-dropdown-item>
            <el-dropdown-item v-if="!hasBindWx" command="bindwx">
              <div class="userCom">
                <img src="@/assets/login/WeChat.png" alt="" style="width: 20px; margin-right: 10px;">
                绑定微信
              </div>
            </el-dropdown-item>
            <el-dropdown-item v-if="hasBindWx" command="unbindwx">
              <div class="userCom">
                <img src="@/assets/login/WeChat.png" alt="" style="width: 20px; margin-right: 10px;">
                解绑微信
              </div>
            </el-dropdown-item>
            <!-- <el-dropdown-item command="Saleskanban">
              <div class="userCom">
                <i class="el-icon-monitor"></i>
                自定义显示
              </div>
            </el-dropdown-item> -->
            <el-dropdown-item command="loginOut">
              <div class="userCom">
                <i class="icon iconfont iconzu1895"></i>
                退出登录
              </div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>


    <SelectStationDialog :visible.sync="selectStationVisible" :config="selectStationConfig" @updated="updated" />
  </div>
</template>

<script>
import SelectStationDialog from './SelectStationDialog'
import { getMessageList,readMessage, setReadType, get_user_station } from '@/api/common';
import { getUserInfo } from "@/utils/auth";
import { getWechatBindUser, unbindWechart, bindWechart } from '@/api/api'
import { GetQueryString } from "@/utils/utils"
import styles from "@/app.scss";
/*全局调用*/
import addTab from "@/common/addTab.js";
import IconA from "./icon/nav_iconA";
import IconB from "./icon/nav_iconB";
import IconC from "./icon/nav_iconC";
import IconD from "./icon/nav_iconD";
import IconE from "./icon/nav_iconE";
import IconF from "./icon/nav_iconF";
import { mapGetters } from "vuex";
import mixin from "@/mixins/mixin.js";
import { delCookie } from "@/utils/utils.js"
export default {
  mixins: [mixin],
  components: {
    IconA,
    IconB,
    IconC,
    IconD,
    IconE,
    IconF,
    SelectStationDialog,
  },
  data() {
    return {
      selectStationVisible: false,
      selectStationConfig: [],
      stationList: [],
      whiteList: ["download", "Saleskanban", "userInfo", "details", 'index'],
      bg_color: styles.bg_color,
      noticeList: [],
      sizeList: [
        { size: "12px", text: "小号字体" },
        { size: "14px", text: "标准字体" },
        { size: "16px", text: "大号字体" },
        { size: "22px", text: "超大号字体" },
      ],
      colorList: [
        {
          color: "#018a46,#ECFAF3,#00b85c,#5BE896,#cbf2de",
        },
        {
          color: "#01C293,#ECFAF3,#2BCCA4,#fff,#01c2934d",
        },
        {
          color: "#C07615,#f2e3d0,#D19B55,#fff,#c0761570",
        },
      ],
      userInfo: {
        organizationShowInfo: ''
      },
      headerImage: '',
      noticeNumber: 0,//60秒没有数据就必须重连，
      time: null,
      setTime: null,
      count: 0,
      notice: {
        type1: '',
        type2: '',
        type3: '',
        type4: '',
        type5: '',
        type6: '',
        type7: '',
      },
      websock: '',
      hasBindWx: false
    };
  },
  computed: {
    ...mapGetters({
      /*这是顶部激活index*/
      activeIndex: "getactiveIndex",
      index: "getindex",
      ICPSindex: "getICPSindex",
      theme: "gettheme"
    }),
    station() {
      let str = window.sessionStorage.getItem('station')
      if(str) {
        return str
      } else if (this.stationList) {
        return this.stationList[0]?.stationName
      } else {
        return '暂无岗位'
      }
    },
  },
  watch: {
    /* 
     * 监听路由变化。切换对应的顶部导航栏和侧边导航栏栏目
     */
    $route: {
      handler: function () {
        let _this = this
        /*独立页面*/
        if (
          _this.whiteList.indexOf(_this.$route.name) !== -1
        ) {
          _this.$store.dispatch("ChangeactiveIndex", "");
          return;
        }
        let key = _this.$route.meta.system;
        _this.$store.dispatch("ChangeactiveIndex", key);
        switch (_this.activeIndex) {
          /*基础系统*/
          case "organization": {
            _this.$store.dispatch("Changeindex", _this.$route.name);
            _this.$store.dispatch("Changelist", _this.basismenu);
            return;
          }
          /*ICPS系统*/
          case "basicSite": {
            _this.$store.dispatch("ChangeICPSindex", _this.$route.name);
            _this.$store.dispatch("Changelist", _this.ICPS);
            return;
          }
          default: {
            break;
          }
        }
      },
      deep: true,
    },
  },
  async mounted() {
    get_user_station().then(res=>{
      this.stationList = res.data || [];
    })
    let color = localStorage.getItem("color");
    let size = localStorage.getItem("size");
    let theme = localStorage.getItem("theme");
    if (theme) {
      this.chooseTheme(theme);
    } else {
      /*主题使用的vueX，所以需要做进一步非空优化*/
      this.chooseTheme(2);
    }
    if (color) {
      this.chooseBg(color);
    }
    if (size) {
      this.chosseFT(size);
    }
    this.userInfo = await getUserInfo();
    this.headerImage = this.userInfo.headImg ? `/file/${this.userInfo.headImg}` : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png';
    /**
     * @Description 获取消息列表
     * @Param: 
     * @Author: wangwangwang
     */
    this.initMessageList();
    this.getBindWx()
    // 处理绑定微信逻辑
    let params = GetQueryString()
    console.log(params)
    if (params.state && params.state === 'bind') {
      // 微信登录，查找token
      let code = params.code
      if (code) {
        bindWechart({code: code}).then(res => {
          if (res.code === 1001) {
            this.$message.success('绑定成功')
            this.$router.push({
              path: '/lvshe/index'
            })
            this.getBindWx()
          }
        })
      }
    }
  },
  created() {
    if (this.websock) {
      this.websock.onclose();
    }
    this.initWebSocket();
  },
  beforeDestroy() {
    if (this.websock) {
      this.websock.onclose();
      console.log('close socket')
    }
  },
  methods: {
    updated(e) {
       window.sessionStorage.setItem('station', e)
    },
    getBindWx() {
      getWechatBindUser().then(res => {
        // console.log(res.data)
        this.hasBindWx = res.data && res.data.userId
      })
    },
    handleDetails(data) {
      if (data === 'size') {
        readMessage({clientType: 'pc',}).then(res => {
          if (res.code === 1001) {
            this.initMessageList();
          }
        })
        return
      }
      const params = {
        id: data.id,
      }
      setReadType(params).then(res => {
        if (res.code === 1001) {
          this.initMessageList();
        }
      })
      /**
       * @Description: 此处判断如果是流程将往流程跳
       * @param {*}
       * @Author: wangwangwang
       */      
      const extraField = JSON.parse(data.extraField);
      if (extraField.popup === 'time_limited_warning') {
        const params = JSON.parse(extraField.value);
        const query = {
          processManagerId: params.processManagerId,
          processTaskId: params.processTaskId,
          receiptNumber: params.receiptNumber,
          dataContent: params.dataContent,
          // createTime: data.createTime,
          // createUserName: data.createUserName,
          taskName: '风险管控审批',
          taskStatus: 1,
          type: 2,
          taskType: 2,
          isReadOnly:  0
        }
        this.$router.push({ name: params.dataSource, query });
        return
      }
      this.$router.push({ name: extraField.pcPage });
    },
    initMessageList() {
      const params = {
        clientType: 'pc',
        readStatus: 0,
        page: 1,
        pageSize: 1000,
        receiveUserId: this.userInfo.userId,
      }
      getMessageList(params).then(res => {
        if (res.code === 1001) {
          this.noticeList = res.data.data;
          this.noticeNumber = res.data.totalRows;
        }
      })
    },
    /**
     * @description 切换主题
     * @param {command}
     */
    chooseTheme(command) {
      this.$store.dispatch("Changetheme", command);
    },
    /**
     * @description 用户操作
     * @param {command} command 指令状态 loginOut退出登录，userInfo个人信息
     */
    userCom(command) {
      switch(command) {
        case 'loginOut':
          if (this.websock) {
            delCookie('accessToken');
            this.websock?.onclose();
          }
          this.$store.dispatch("user/logout").then(() => {
            const urlList = window.localStorage.getItem('urlList')
            sessionStorage.clear();
            localStorage.clear();
            window.localStorage.setItem('urlList', urlList);
            this.$router.push("/login");
          });
          break;
        case 'Saleskanban':
          this.handleSelect("Saleskanban");
        break;
        case 'userInfo':
          this.handleSelect("userInfo");
        break;
        case 'station':
          this.selectStationConfig = this.stationList;
          this.selectStationVisible = true
        break;
        case 'bindwx':   // 绑定跳转
          window.open('https://open.weixin.qq.com/connect/qrconnect?appid=wx71e02854861febfc&redirect_uri=' + encodeURIComponent('https://lvshe.huashijc.com/#/') +'&response_type=code&scope=snsapi_login&state=bind#wechat_redirect')
        break;
        case 'unbindwx':  // 微信解绑
          unbindWechart().then(res => {
            if (res.code === 1001) {
              this.$message.success('解绑成功')
              this.getBindWx()
            }
          })
        break;
        default: break;
      }
    },
    /**
     * @description 导航栏切换事件
     * addTab.$emit('name', 'index');向addTab的name传值index
     * key 判断key,进入对应系统，并将key存到ChangeactiveIndex,下次进入直接打开
     */
    handleSelect(key) {
      /*当index为空时，就直接进入系统的组织页面*/
      switch (key) {
        /*基础系统*/
        case "organization": {
          if (this.index && JSON.parse(sessionStorage.getItem("navList")) ?.some(res => (res.name == this.index))) {
            addTab.$emit("name", this.index);
          } else {
            addTab.$emit("name", "basicIndex");
          }
          return;
        }
        /*ICPS系统*/
        case "basicSite": {
          if (this.ICPSindex && JSON.parse(sessionStorage.getItem("navList")) ?.some(res => (res.name == this.ICPSindex))) {
            addTab.$emit("name", this.ICPSindex);
          } else {
            addTab.$emit("name", "ICPSIndex");
          }
          return;
        }
        /*download部署与任何系统，直接打开页面，后续不属于任何系统的页面可以继续设置*/
        case "download": {
          addTab.$emit("name", key);
          return;
        }
        case "Saleskanban": {
          addTab.$emit("name", key);
          return;
        }
        case "userInfo": {
          addTab.$emit("name", key);
          return;
        }
        case "details": {
          addTab.$emit("name", key);
          return;
        }
        default: {
          this.openOutUrl(key)
          break;
        }
      }
    },
    openOutUrl (key) {
      const newData = this.Topmenu.find(item => item?.children?.length)?.children || [];
      const newArry = newData.concat(this.Topmenu);
      const findData = newArry.find(item => item.name === key);
      this.$store.dispatch("ChangeactiveIndex", key);
      this.$store.dispatch("Changelist", findData.arr);
      this.$router.push({ name: 'outUrl' });
    },
    /**
     * @description 换肤颜色展示
     * @param {color} color 主题色
     */
    colorStyle(color) {
      return (
        "margin:5px 0;height:30px;width:60px;background-color:" +
        color.split(",")[0]
      );
    },
    /**
     * @description 修改主题背景色
     * @param {command} command 背景颜色数组
     */
    chooseBg(command) {
      document
        .getElementsByTagName("body")[0]
        .style.setProperty("--bg_background1", command.split(",")[0]);
      document
        .getElementsByTagName("body")[0]
        .style.setProperty("--bg_background2", command.split(",")[2]);
      document
        .getElementsByTagName("body")[0]
        .style.setProperty("--bg_background3", command.split(",")[4]);
      document
        .getElementsByTagName("body")[0]
        .style.setProperty("--bg_colorTable", command.split(",")[1]);
      document
        .getElementsByTagName("body")[0]
        .style.setProperty("--bg_color", command.split(",")[2]);
      document
        .getElementsByTagName("body")[0]
        .style.setProperty("--line-color", command.split(",")[3]);
      localStorage.setItem("color", command);
    },
    /**
     * @description 修改主题字体
     * @param {a} a 字体颜色
     */
    chosseFT(a) {
      if (a == "size") {
        this.$prompt("请输入字号大小", "标题", {
          confirmButtonText: "保存",
          cancelButtonText: "取消",
          inputPattern: /^\d+$/,
          inputErrorMessage: "请输入数字",
        }).then(({ value }) => {
          if (value > 32) value = 32;
          window.document.getElementsByTagName("body")[0].style.setProperty("--font_size", value + "px");
          localStorage.setItem("size", value + "px");
        }).catch(() => { });
      } else {
        window.document
          .getElementsByTagName("body")[0]
          .style.setProperty("--font_size", a);
        localStorage.setItem("size", a);
      }
    },
    initWebSocket() { //初始化weosocket
      const wsuri = `${process.env.VUE_APP_API_WSS}websocket`;//这个必须域名连接，否则跨域,域名连接不上就服务器转两次就好了
      this.websock = new WebSocket(wsuri);
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketonclose;
    },
    websocketonerror() {//连接建立失败重连
      let _this = this
      if (this.count == 0) {
        this.count++
        clearInterval(_this.setTime)
        _this.setTime = setTimeout(function () {
          _this.initWebSocket();
          // _this.$message.error("服务断开,重新连接中。。。")
          this.count = 0
        }, 5000)
      }
    },
    websocketonclose () {

    },
    websocketonmessage(e) { //数据接收
      const data = JSON.parse(e.data);
      const self = this;
      if (data.code === 1001) {
        this.initMessageList();
        if (data.data) {
          const params = JSON.parse(data.data);
          const params2 = JSON.parse(params.extraField);
          /**
           * @Description: 处理后场工长发消息的弹窗提示。
           * @param {*} params2
           * @Author: wangwangwang
           */
          if (params2.popup === 'back_issue_materials') { // 后场工长消息弹窗(发料通知)
            if (this.notice.type1) {
              this.notice.type1.close()
            }
            let noticeType = this.$notify({
              title: '提示',
              type: 'warning',
              message: params.content,
              duration: 0,
              position: 'bottom-right',
              onClick: () => {
                self.$router.push({ name: 'smartschedulj' })
              }
            });
            this.notice.type1 = noticeType;
          }
          if (params2.popup === 'back_exception_handling') { // 后场工长消息弹窗(异常处理)
            if (this.notice.type2) {
              this.notice.type2.close()
            }
            let noticeType = this.$notify({
              title: '提示',
              type: 'warning',
              message: params.content,
              duration: 0,
              position: 'bottom-right',
              onClick: () => {
                self.$router.push({ name: 'smartschedulg' })
              }
            });
            this.notice.type2 = noticeType;
          }
          if (params2.popup === 'back_surplus_handling') { // 后场工长消息弹窗(余料处理)
            if (this.notice.type3) {
              this.notice.type3.close()
            }
            let noticeType = this.$notify({
              title: '提示',
              type: 'warning',
              message: params.content,
              duration: 0,
              position: 'bottom-right',
              onClick: () => {
                self.$router.push({ name: 'smartschedulj' })
              }
            });
            this.notice.type3 = noticeType;
          }
          if (params2.popup === 'back_residual_warning') { // 后场工长消息弹窗(余料预警)
            if (this.notice.type4) {
              this.notice.type4.close()
            }
            let noticeType = this.$notify({
              title: '提示',
              type: 'warning',
              message: params.content,
              duration: 0,
              position: 'bottom-right',
              onClick: () => {
                self.$router.push({ name: 'smartschedulj' })
              }
            });
            this.notice.type4 = noticeType;
          }
          if (params2.popup === 'back_production_adjustment') { // 后场工长消息弹窗(生产调整)
            if (this.notice.type5) {
              this.notice.type5.close()
            }
            let noticeType = this.$notify({
              title: '提示',
              type: 'warning',
              message: params.content,
              duration: 0,
              position: 'bottom-right',
              onClick: () => {
                self.$router.push({ name: 'smartscheduld',query: {type: 2} });
              }
            });
            this.notice.type5 = noticeType;
          }
          if (params2.popup === 'back_delay_reminder') { // 后场工长消息弹窗(延期提醒)
            if (this.notice.type6) {
              this.notice.type6.close()
            }
            let noticeType = this.$notify({
              title: '提示',
              type: 'warning',
              message: params.content,
              duration: 0,
              position: 'bottom-right',
              onClick: () => {
                self.$router.push({ name: 'smartscheduld',query: {type: 2} });
              }
            });
            this.notice.type6 = noticeType;
          }
          if (params2.popup === 'back_plan_review') { // 后场工长消息弹窗(计划审核)
            if (this.notice.type7) {
              this.notice.type7.close()
            }
            let noticeType = this.$notify({
              title: '提示',
              type: 'warning',
              message: params.content,
              duration: 0,
              position: 'bottom-right',
              onClick: () => {
                self.$router.push({ name: 'smartscheduld' })
              }
            });
            this.notice.type7 = noticeType;
          }
        }
      }
    },
    websocketonopen() {
      let _this = this
      clearInterval(this.setTime)
      const params = {
        code: 2003,
        data: this.userInfo.userId,
      }
      const data = JSON.stringify(JSON.stringify(params));
      this.sendData(data)
      clearInterval(this.time)
      this.time = setInterval(function () {
        const params2 = {
          code: 2001,
          data: 'ping'
        }
        const data2 = JSON.stringify(params2);
        _this.sendData(data2);
      }, 5000)
    },
    sendData(data) {
      if (!window.WebSocket) { return; }
      if (this.websock.readyState == WebSocket.OPEN) {
        this.websock.send(data);
      } else {
        this.initWebSocket();
      }
    }
  },
  destroyed() {
    this.websock.close();
  },
};
</script>

<style lang="scss">
.top_nav {
  /*优化eleUI的样式及动态配置颜色和字体*/
  .el-menu {
    border: 0;
    @include discen_al;
  }
  /*优化导航栏*/
  .el-menu-item,
  .el-submenu__title {
    font-size: calc(#{$font_size} + 2px);
    border: 0 !important;
    height: 34px !important;
    line-height: 34px !important;
    margin: 0 10px;
    border-radius: 17px !important;
    font-weight: 400;
  }
  .el-submenu {
    @include discen;
  }
  .el-submenu.is-active .el-submenu__title,
  .el-submenu:hover .el-submenu__title,
  .el-menu-item:hover {
    background-color: rgba(255, 255, 255, 0) !important;
  }
  .el-menu-item.is-active {
    background: rgba(0, 0, 0, 0) !important;
  }
}
/*处理menu下拉菜单*/
.el-menu--popup {
  padding: 0;
}
.el-menu--horizontal .el-menu .el-menu-item {
  font-size: calc(#{$font_size} + 2px);
  line-height: 40px !important;
  height: 40px;
  background-color: #ffffff !important;
  color: #808080 !important;
  border: 0;
}
.el-menu--horizontal .el-menu .el-menu-item:hover {
  color: $bg_color !important;
  background: $bg_colorTable !important;
}
</style>
/*页面样式*/
<style lang="scss" scoped>
.loginUser {
  width: 231px;
  height: 76px;
  display: flex;
  align-items: center;
  border-bottom: 1px #e3e9ee solid;
  .el-avatar {
    width: 44px;
    height: 44px;
    margin-right: 8px;
  }
  > div {
    color: #3d3e3e;
    font-size: calc(#{$font_size} - 2px);
    font-weight: 400;
    .loginUserText {
      padding-right: 5px;
      font-size: calc(#{$font_size} + 2px);
      font-weight: bold;
    }
  }
}
.userCom {
  i {
    padding-right: 5px;
  }
  width: 231px;
  height: 48px;
  @include discen_al;
}
.theme {
  width: 160px;
  height: 32px;
  i {
    padding-right: 5px;
  }
}
.none {
  font-size: calc(#{$font_size} + 2px);
  z-index: 2000;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 400;
  .border {
    background: rgba(255, 255, 255, 0);
  }
}
.none:hover {
  font-size: calc(#{$font_size} + 2px);
  color: #ffffff;
  font-weight: bold;
}
.actvie {
  color: #ffffff;
  font-weight: bold;
  .border {
    // background: rgba(255, 255, 255, 0.5);
    background: $line-color !important;
  }
}
.border {
  width: 32px;
  height: 3px;
  margin: 0 auto;
  border-radius: 2px;
}

.title {
  .img {
    height: 30px;
  }
  .title_text {
    padding: 0 10px;
    @include ellipsis;
  }
  color: #ffffff;
  font-size: calc(#{$font_size} + 6px);

  font-weight: bold;
  @include discen;
}
.top_nav {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}
.right_top-menu {
  @include discen_al;
  > div:hover > div * {
    cursor: pointer;
    color: rgba(255, 255, 255, 0.65);
  }
  > div {
    padding-left: 20px;
    @include discen;
    i {
      font-size: 18px;
      color: #ffffff;
    }
  }
}
.size_text {
  padding: 5px 0;
}
.notice {
  font-size: $font_size;
  width: 260px;
  height: 32px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user_avatar {
  padding-left: 20px;
  @include discen;
  .user_name {
    font-size: $font_size;
    color: #ffffff;
    padding: 0 10px;
  }
}
</style>
